<template>
    <div class="my-input">
        <!-- value属性是输入框的值 -->
        <!-- 当输入发生变化就会触发的事件 -->
        <!-- input框上的事件类型  input 事件 （输入发生变化就会触发）   change事件 值发生改变就会触发  blur失去焦点事件  focus获取焦点事件-->
        <input type="text" :value="modelValue" :placeholder="aa" @input="$emit('update:modelValue',$event.target.value)" @blur="$emit('blurs')">
        <!-- 如果往自定义的组件中间插入内容，必须借助插槽 -->
        <!-- 没有名字的插槽叫匿名插槽  有名字的叫具名 -->
        <!-- name后面的名字随意定义 但是  <template #icon></template >-->
        <span>
            <slot name="font"></slot>
        </span>
        <span>
            <slot name="icon"></slot>
        </span>

       
    </div>
</template>
<script>
export default {
    props:{
        modelValue:[String,Number],
        aa:{
            type:String
        }
    }
}
</script>